<template>
  <!-- 用户历史病历 -->
  <el-dialog
    :title="patientInfo.name + '的历史病历'"
    :visible="value"
    width="1000px"
    custom-class="dialog-box"
    @close="onClose"
    @open="onOpen"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <template v-if="isSign">
      <h4 style="margin:0;">关键体征数据:</h4>
      <br />
      <div style="min-height:120px;"></div>
      <h4 style="margin:0;">历史病历:</h4>
      <br />
    </template>
    <div>
      <el-collapse v-model="activeIndex" accordion>
        <el-collapse-item
          v-for="(item, index) in tableList"
          :key="index"
          :name="index + ''"
        >
          <div class="form-tool" slot="title" style="width:90%">
            <div>
              <span
                class="vertical-middle"
                style="font-size:16px;margin-right:10px;font-weight:600;"
                >{{ item.treatmentDate }}</span
              >
              <span
                class="vertical-middle"
                style="font-size:16px;margin-right:10px;font-weight:600;"
                >{{ item.diagnosisType }}</span
              >
              <span
                class="vertical-middle"
                style="font-size:16px;margin-right:10px;font-weight:600;"
                >{{ item.doctorName }}</span
              >
              <span
                class="vertical-middle"
                style="font-size:16px;margin-right:10px;font-weight:600;"
                >{{ item.deptName }}</span
              >
              <!-- <el-badge class="vertical-middle" style="line-height:1;" v-if="item.cureMedicalInfoResponse.cureFirstVisitRecord" :value="item.cureMedicalInfoResponse.cureFirstVisitRecord|toCureFirstVisitRecord">
              </el-badge>-->
            </div>
            <div v-if="copy">
              <el-link @click.stop="onCopyBL(item)" :underline="false">
                <i
                  class="iconfont iconfuzhi vertical-middle"
                  style="font-size:20px;"
                ></i>
                <span class="vertical-middle">复制病历</span>
              </el-link>
            </div>
            <div v-if="print">
              <el-link :underline="false" @click.stop="onPrint(item)">
                <i
                  class="iconfont icondayin vertical-middle"
                  style="font-size:20px;"
                ></i>
                <span class="vertical-middle">打印病历</span>
              </el-link>
            </div>
          </div>
          <div class="form-box">
            <template
              v-for="(item2, index2) in item.cureMedicalInfoResponse
                .dynamicFieldBeans"
            >
              <div v-if="item2.value" class="form-item" :key="index2">
                <div
                  v-if="
                    item2.component == 'SELECT' ||
                      item2.component == 'RADIO' ||
                      item2.component == 'CHECKBOX'
                  "
                >
                  <span>{{ item2.name }}：</span>
                  <span v-if="item2.name == '初步诊断'">{{
                    item.cureMedicalInfoResponse.cureFirstVisitRecord
                      | toCureFirstVisitRecord
                  }}</span>
                  <span v-else>{{ toArrayStr(item2) }}</span>
                </div>
                <div v-else>
                  <span>{{ item2.name }}：</span>
                  <span>{{ item2.value }}</span>
                </div>
              </div>
            </template>
            <div
              v-if="
                item.cureMedicalInfoResponse.curePatientHistory &&
                  item.cureMedicalInfoResponse.curePatientHistory.pastHistory
              "
              class="form-item"
            >
              既往史：
              <span>{{
                item.cureMedicalInfoResponse.curePatientHistory.pastHistory
              }}</span>
            </div>
            <div
              v-if="
                item.cureMedicalInfoResponse.curePatientAllergy &&
                  item.cureMedicalInfoResponse.curePatientAllergy.length > 0
              "
              class="form-item"
            >
              过敏史：
              <span>
                <span
                  v-for="(item, index) in item.cureMedicalInfoResponse
                    .curePatientAllergy"
                  :key="index"
                  style="margin-right:10px;"
                  >{{ item.allergens }},{{ item.allergicReaction }},{{
                    item.allergicDegree
                  }}</span
                >
              </span>
            </div>
            <div
              v-if="
                item.cureMedicalInfoResponse.curePatientHistory &&
                  item.cureMedicalInfoResponse.curePatientHistory
                    .personalHistory
              "
              class="form-item"
            >
              个人史：
              <span>{{
                item.cureMedicalInfoResponse.curePatientHistory.personalHistory
              }}</span>
            </div>
            <div
              v-if="
                item.cureMedicalInfoResponse.curePatientHistory &&
                  item.cureMedicalInfoResponse.curePatientHistory.familyHistory
              "
              class="form-item"
            >
              家族史：
              <span>{{
                item.cureMedicalInfoResponse.curePatientHistory.familyHistory
              }}</span>
            </div>
            <div
              v-if="
                patientInfo.sex == 2 &&
                  patientInfo.age < 18 &&
                  item.cureMedicalInfoResponse.curePatientHistory &&
                  item.cureMedicalInfoResponse.curePatientHistory.afterTheBirth
              "
              class="form-item"
            >
              经带胎产史：
              <span v-if="item.cureMedicalInfoResponse.curePatientHistory">{{
                item.cureMedicalInfoResponse.curePatientHistory.afterTheBirth
              }}</span>
            </div>
            <div
              v-if="
                item.cureMedicalInfoResponse.curePatientHistory &&
                  item.cureMedicalInfoResponse.curePatientHistory
                    .seedlingsHistory
              "
              class="form-item"
            >
              疫苗接种史：
              <span v-if="item.cureMedicalInfoResponse.curePatientHistory">{{
                item.cureMedicalInfoResponse.curePatientHistory.seedlingsHistory
              }}</span>
            </div>
            <div
              v-if="
                item.cureMedicalInfoResponse.curePatientHistory &&
                  item.cureMedicalInfoResponse.curePatientHistory.checkupHistory
              "
              class="form-item"
            >
              实验室及辅助检查：
              <span v-if="item.cureMedicalInfoResponse.curePatientHistory">{{
                item.cureMedicalInfoResponse.curePatientHistory.checkupHistory
              }}</span>
            </div>
            <div class="form-item" v-if="item.cureCheckup">
              实验室检查：{{ item.cureCheckup }}
            </div>
            <div class="form-item" v-if="item.cureAssistInfo">
              辅助检查：{{ item.cureAssistInfo }}
            </div>
            <div class="form-item" v-if="item.cureAdviceInfo">
              治疗：{{ item.cureAdviceInfo }}
            </div>
            <div class="form-item" v-if="item.cureMaterialInfo">
              材料费：{{ item.cureMaterialInfo }}
            </div>
            <div class="form-item" v-if="item.cureOthersInfo">
              其他收费：{{ item.cureOthersInfo }}
            </div>
          </div>
          <div>
            <h4 style="margin:0;">西/成药处方：</h4>
            <div class="form-box">
              <div
                v-for="(item,
                index) in item.westernCurePrescriptionInfoResponses"
                :key="index"
                class="form-item"
              >
                <template
                  v-for="(item, index) in item.curePrescriptionDrugInfos"
                >
                  <table :Key="index" width="100%" border="0">
                    <tr>
                      <td>{{ index + 1 }}：{{ item.drugName }}</td>
                      <td width="100">
                        {{ item.useTotal
                        }}{{ item.totalUnit | changeAssist(oneDoseUnitArr) }}
                      </td>
                      <td width="100">{{ item.useDay }}天</td>
                    </tr>
                  </table>

                  <div :key="index" style="padding:0 20px;">
                    用法：{{ item.use | changeAssist(useEnum) }}:{{
                      item.frequency | changeAssist(frequencyArr)
                    }},每次剂量{{ item.oneDose
                    }}{{ item.oneDoseUnit | changeAssist(oneDoseUnitArr) }}
                    <span v-if="item.remark">（{{ item.remark }}）</span>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div
            v-for="(item,
            index) in item.traditionalCurePrescriptionInfoResponses"
            :key="index"
          >
            <h4 style="margin:0;">中药处方{{ index > 0 ? index : "" }}：</h4>
            <div class="form-box">
              <div class="form-item">
                <div>
                  <span>每副：</span>
                  <span
                    v-for="(item2, index2) in item.curePrescriptionDrugInfos"
                    :key="index2"
                    style="margin-right:10px;"
                    >{{ item2.drugName }}
                    {{ item2.oneDose * item.curePrescriptionUseInfo.totalDose
                    }}{{
                      item2.oneDoseUnit | changeAssist(oneDoseUnitArr)
                    }}</span
                  >
                </div>
                <div style="padding:0 20px;">
                  共{{ item.curePrescriptionUseInfo.totalDose }}副，{{
                    item.curePrescriptionUseInfo.frequency
                      | changeAssist(frequencyArr)
                  }}，共{{ item.curePrescriptionUseInfo.day }}天
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <br />
    <div>
      <el-button
        v-if="isPager"
        style="width:100%"
        type="primary"
        :loading="btnLoading"
        >获取更多数据</el-button
      >
      <el-button v-else style="width:100%" disabled @click="onNext"
        >没有更多数据了</el-button
      >
    </div>
    <iframe
      ref="iframe1"
      frameborder="0"
      height="0px"
      width="0px"
      src="/print/caseReport.html"
    ></iframe>
  </el-dialog>
</template>
<script>
export default {
  props: {
    value: [Boolean],
    copy: [Boolean],
    print: [Boolean],
    isSign: {
      type: Boolean,
      default: true
    },
    patientInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  computed: {},
  components: {},
  filters: {
    toCureFirstVisitRecord(value) {
      let str = "";
      if (value) {
        value.forEach(element => {
          if (element) {
            if (str) {
              str += "," + element.firstVist;
            } else {
              str = element.firstVist;
            }
          }
        });
      }
      return str;
    }
  },
  data() {
    return {
      btnLoading: false,
      activeIndex: "0",
      pager: { pageSize: 20, pageNum: 1, total: 0 },
      tableList: [],
      isPager: true,
      oneDoseUnitArr: [], //剂量单位
      frequencyArr: [], //频次
      form: {
        patientId: ""
      },
      //职业
      occupationEnum: [],
      //民族
      nationEnum: [],
      //用法
      useEnum: []
    };
  },
  mounted() {
    let th = this;
    th.getCommonConfigByKey("职业").then(res => {
      th.occupationEnum = res;
    });
    th.getCommonConfigByKey("民族").then(res => {
      th.nationEnum = res;
    });
    th.getCommonConfigByKey("药品用法").then(res => {
      th.useEnum = res;
    });
    th.getCommonConfigByKey("药品剂量单位").then(res => {
      th.oneDoseUnitArr = res;
    });
    th.getCommonConfigByKey("药品频次").then(res => {
      th.frequencyArr = res;
    });
  },
  methods: {
    onNext() {
      let th = this;
      th.pager.pageNum++;
      th.getData();
    },
    onPrint(obj) {
      let th = this;
      let json = {
        hospital: {
          name: th.adminUser.hospitalName,
          logo: th.adminUser.printLogo,
          province: th.adminUser.hospitalProvince,
          city: th.adminUser.hospitalCity,
          district: th.adminUser.hospitalDistrict,
          address: th.adminUser.hospitalAddress
        },
        professionalDeptName: obj.professionalDeptName,
        doctorName: obj.doctorName,
        time: obj.treatmentDate,
        cureFirstVisitRecord: obj.cureMedicalInfoResponse.cureFirstVisitRecord, //诊断
        patientInfo: th.patientInfo,
        dataForm: obj.cureMedicalInfoResponse.dynamicFieldBeans || [], //动态病历
        curePatientAllergy:
          obj.cureMedicalInfoResponse.curePatientAllergy || [], //过敏史
        curePatientHistory:
          obj.cureMedicalInfoResponse.curePatientHistory || {}, //个人历史
        occupationEnum: th.occupationEnum, //职业
        nationEnum: th.nationEnum, //婚姻
        useEnum: th.useEnum, //用法
        traditionRecipe: [], //中药
        westwardRecipe: [], //西药
        unitEnum: th.oneDoseUnitArr, //单位
        frequencyEnum: th.frequencyArr //频次
      };
      //西药
      if (
        obj.westernCurePrescriptionInfoResponses &&
        obj.westernCurePrescriptionInfoResponses.length > 0
      ) {
        json.westwardRecipe =
          obj.westernCurePrescriptionInfoResponses[0].curePrescriptionDrugInfos;
      }
      //中药
      if (
        obj.traditionalCurePrescriptionInfoResponses &&
        obj.traditionalCurePrescriptionInfoResponses.length > 0
      ) {
        json.traditionRecipe = obj.traditionalCurePrescriptionInfoResponses;
      }
      th.$refs["iframe1"].contentWindow.postMessage(
        json,
        `${window.location.origin}/print/caseReport.html`
      );
    },
    //获取药品
    getData(type) {
      let th = this;
      if (type == -1) {
        th.pager.pageNum = 1;
        th.pager.total = 0;
      }
      let j = {};
      Object.assign(j, th.pager, th.form);
      th.btnLoading = true;
      th.$api.patientHistorypageQueryV2(j).then(res => {
        let list = res.dataBody.list;
        // console.log(res);
        if (res.executed) {
          th.tableList.push(...list);
          th.pager.total = res.dataBody.total;
        }
        th.btnLoading = false;
        if (list.length < th.pager.pageSize) th.isPager = false;
      });
    },
    //复制病历
    onCopyBL(obj) {
      this.$emit("copyBL", obj);
      this.onClose();
    },
    //特定的值解析|动态病历
    toArrayStr(obj) {
      // let th = this;
      let result = [];
      try {
        let arr = JSON.parse(obj.componentValue);
        let valueArr = obj.value.split(',');
        //判断是否多个
        arr.forEach(el => {
             if(valueArr.includes(el.id)){
               result.push(el.value);
             }
        });
      } catch (error) {
        console.log(error);
      }
      return result.join(",");
    },
    onOpen() {
      let th = this;
      let fn = function() {
        th.form.patientId = th.patientInfo.patientId;
        th.getData();
      };
      th.$nextTick(function() {
        fn();
      });
    },

    onClose() {
      let th = this;
      th.tableList = [];
      th.isPager = true;
      th.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.form-box {
  padding: 0 20px;
  border: 1px solid #ddd;
  background: #fafafa;
  margin-bottom: 15px;
  .form-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    // &:first-child {
    //   border-top-color: transparent;
    // }
  }
  .form-box-lebel {
    color: #666;
  }
}
</style>
